<script setup>
import {reactive} from "vue";
import xx from "@/axios/xx";
import {ElMessage, ElMessageBox} from "element-plus";

const info = reactive({
  list:[],//列表数据
  form:{},//表单数据
  dialogVisible:false, //对话框数据
  total:null,//总条数
  pageNum:null,//当前页
  pageSize:null,//当前页数据容量
  isAdd:true,//增加和修改选项标识
  loanProductTypeList:[],//产品类型对象
  bankInfoList:[]//银行对象
})
//查询列表信息
const load = () => {
  xx.get("/loanProduct",{
        params: {
          pageNum:info.pageNum,
          pageSize:info.pageSize,
          productName:info.form.productName,
          interestRate:info.form.interestRate,
        }
      },
  ).then(res =>{
    console.log(res);
    info.list = res.data.list;
    //当前页
    info.pageNum = res.data.pageNum;
    //每页大小
    info.pageSize = res.data.pageSize;
    //总条数
    info.total = res.data.total;
    //产品名称
    info.productName = res.data.productName;
    //利率
    info.interestRate = res.data.interestRate
  })
}//查询产品类型信息
load()
//分页当前页改变
const handleCurrentChange = (pageNum) => {
  //pageNum是前端网页所选择的当前页
  //传递数据给info.pageSize
  info.pageNum = pageNum;
  // 执行加载函数，加载函数会把info.pageNum数据发送给后端，
  // 后端在根据接收到的当前页和每页数据大小返回数据给前端，
  // 前端再用info.pageNum和info.pageSize接收数据
  load();
}//分页当前页改变
//分页每页数据大小改变
const handleSizeChange = (pageSize) => {
  //pageSize是前端所选择的每页大小
  //传递数据给info.pageSize
  info.pageSize = pageSize;
  // 执行加载函数，加载函数会把info.pageSize数据发送给后端，
  // 后端在根据接收到的当前页和每页数据大小返回数据给前端，
  // 前端再用info.pageNum和info.pageSize接收数据
  load();
}//分页每页数据大小改变
//删除数据
const handleDelete = (productId) => {
  ElMessageBox.confirm(
      '确定删除该条产品类型信息?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        xx.delete("/loanProduct/"+productId).then(res => {
          console.log(productId);
          console.log(res);
          if(res.code ==200){
            ElMessage({
              type: 'success',
              message: res.message,
            })
            load();
          } else {
            ElMessage.error(res.message)
          }
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
} //删除数据
//增加产品信息
const add = () => {
  //增加前先获取银行信息
  xx.get("/bankInfo/findAll").then(res => {
    info.bankInfoList = res.data;
  })
  //获取产品类型信息
  xx.get("/loanProductType/findAll").then( res => {
    info.loanProductTypeList = res.data;
  })

  info.isAdd = true
  info.dialogVisible = true;
}
//关闭对话框清除数据
const handleClose = () => {
  info.form = {};
  info.dialogVisible = false;
}//关闭对话框清除数据
//持久化数据
const persistence = () => {
  xx({
    url:"/loanProduct",
    method:info.isAdd?"post":"put",
    data:info.form
  }).then(res => {
    if (res.code == 200){
      ElMessage({
        type: 'success',
        message: res.message,
      })
    } else {
      ElMessage.error(res.message)
    }
    //关闭对话框
    info.dialogVisible = false;
    //清空数据
    info.form = {}
    //重新加载
    load()
  })

}//持久化数据
//编辑数据
const handleEdit = (productId) => {
  info.isAdd = false;
  xx.get("/loanProduct/"+productId).then(res => {
    info.form = res.data;
  })
  //增加前先获取银行信息
  xx.get("/bankInfo/findAll").then(res => {
    info.bankInfoList = res.data;
  })
  //获取产品类型信息
  xx.get("/loanProductType/findAll").then( res => {
    info.loanProductTypeList = res.data;
  })

  info.dialogVisible = true;
}
</script>

<template>
  <el-row style="display: flex">
    <!--  产品搜索表单-->
    <el-form :inline="true" :model="info.form" class="demo-form-inline" style="display: flex">
      <el-form-item label="产品名称">
        <el-input v-model="info.form.productName" placeholder="模糊查询" clearable />
      </el-form-item>
      <el-form-item label="利率">
        <el-input v-model="info.form.interestRate" placeholder="精确查询" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="load">查询</el-button>
      </el-form-item>
    </el-form>
    <div style="flex: 1"></div><!--  新增类型按钮-->
    <el-button color="#5055be" type="success" @click="add" style="display:flex; justify-content: right; margin-right: 50px">新增产品信息</el-button>

  </el-row>
  <!--  产品表格信息-->
  <el-table :data="info.list" border stripe style="width: 100%">
    <el-table-column type="index" align="center" label="序号" width="80" />
    <el-table-column prop="productName" align="center" label="产品" width="180" />
    <el-table-column prop="loanProductType.loanTypeName" align="center" label="产品类型" width="180" />
    <el-table-column prop="bankInfo.bankName" align="center" label="银行" width="180" />
    <el-table-column prop="interestRate" align="center" label="利率" width="100" />
    <el-table-column prop="maxLimit" align="center" label="最高额度" width="100" />
    <el-table-column prop="maxTerm" align="center" label="最长期限" width="100" />
    <el-table-column prop="otherAttributes" align="center" label="备注" />
    <el-table-column label="操作" align="center" width="200" >
      <template #default="scope">
        <el-button size="default" type="primary" @click="handleEdit(scope.row.productId)">编辑</el-button>
        <el-button size="default" type="danger" @click="handleDelete(scope.row.productId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <br>
  <!--  分页条-->
  <div class="pagination-wrapper">
    <el-pagination
        id="pagination"
        v-model:current-page="info.pageNum"
        v-model:page-size="info.pageSize"
        :page-sizes="[5,10,15,20]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="info.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!--  dialog对话框窗口-->
  <el-dialog v-model="info.dialogVisible" :title="info.isAdd?'增加产品信息':'修改产品信息'" :before-close="handleClose" width="45%">
    <!--  产品信息填写表单-->
    <el-form :model="info.form" label-width="auto" style="max-width: 450px; margin-left: 80px">
      <el-form-item label="产品名称" >
        <el-input v-model="info.form.productName"  style="height: 38px;width: 400px"/>
      </el-form-item>
      <el-form-item label="产品类型" >
        <el-select v-model="info.form.loanTypeId" placeholder="选择产品类型">
          <el-option v-for="item in info.loanProductTypeList" :label="item.loanTypeName" :value="item.loanTypeId" />
        </el-select>
      </el-form-item>
      <el-form-item label="银行" >
        <el-select v-model="info.form.bankId" placeholder="选择银行">
          <el-option v-for="item in info.bankInfoList" :label="item.bankName" :value="item.bankId" />
        </el-select>
      </el-form-item>
      <el-form-item label="利率" >
        <el-input v-model="info.form.interestRate"  style="height: 38px;width: 400px"/>
      </el-form-item>
      <el-form-item label="最高额度" >
        <el-input v-model="info.form.maxLimit"  style="height: 38px;width: 400px"/>
      </el-form-item>
      <el-form-item label="最长期限" >
        <el-input v-model="info.form.maxTerm"  style="height: 38px;width: 400px"/>
      </el-form-item>
      <el-form-item label="备注" >
        <el-input v-model="info.form.otherAttributes" type="textarea" />
      </el-form-item>
    </el-form>
    <!--  对话框底部按钮设置-->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="persistence">保存信息</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>
/*pagination分页组件居中显示*/
#pagination{
  justify-content: center;
}
</style>